<template>
  <div class="h-[100%] flex flex-col bg-slate-100">
    <el-menu style="width: 100% !important" :collapse="true">
      <slot name="header-menu">
        <el-menu-item class="flex flex-row-reverse" @click="toggleMenu">
          <el-icon>
            <span
              class="mdi mdi-arrow-expand-right transition duration-700 ease-in-out"
              :class="isMenuCollapsed ? 'rotate-0' : 'rotate-180'"
            ></span>
          </el-icon>
        </el-menu-item>
      </slot>
    </el-menu>
    <el-scrollbar>
      <el-menu router :default-active="$route.path" :collapse="isMenuCollapsed">
        <template v-for="r in routes.children" :key="r.path">
          <el-sub-menu
            v-if="r.children && r.children.length > 0"
            :index="r.path"
          >
            <template #title>
              <el-icon>
                <span :class="r.icon"></span>
              </el-icon>
              <span>{{ r.name }}</span>
            </template>
            <template v-for="cr in r.children" :key="cr.path">
              <el-menu-item v-if="cr.show" :index="cr.path">
                <!-- 子菜单项不要图标 -->
                <!-- <el-icon> <span :class="cr.icon"></span> </el-icon> -->
                <span>{{ cr.name }}</span>
              </el-menu-item>
            </template>
          </el-sub-menu>
          <el-menu-item v-else-if="r.show" :index="r.path">
            <el-icon> <span :class="r.icon"></span> </el-icon>
            <span>{{ r.name }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </el-scrollbar>
    <div class="grow el-menu-extend flex flex-col-reverse">
      <el-menu :collapse="isMenuCollapsed">
        <slot name="footer-menu"></slot>
      </el-menu>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    routes: any;
    collapse?: boolean;
  }>(),
  {
    collapse: true,
  },
);

const isMenuCollapsed = ref(props.collapse);
const toggleMenu = () => {
  isMenuCollapsed.value = !isMenuCollapsed.value;
};

watch(
  () => props.collapse,
  collapse => {
    isMenuCollapsed.value = collapse;
  },
);

defineExpose({
  toggleMenu,
});
</script>

<style scoped>
.el-menu-extend {
  border-right: solid 1px var(--el-menu-border-color);
  background-color: var(--el-menu-bg-color);
}
</style>
